<extend name="Home@Base/common" />
<block name="body">
    <div class="span9 page_message">
        <section id="contents"> <include file="Home@Addons/_nav" />
            <div class="tab-content">
                <php> $post_url || $post_url = U('add?model='.$model['id'], $get_param);</php>
                <form class="form-horizontal form-center" method="post" action="{$post_url}" id="form" autocomplete="off">

                    <div class="form-item cf">
                        <label class="item-label"> <span class="need_flag">*</span> 费用类型 </label>
                        <div class="controls">
                            <input type="text" readonly="readonly" name="type" value={$itemInfo.type}>
                        </div>
                    </div>
                    <!--<if condition="$itemInfo.reimburse_type eq 0">-->
                        <!--<div class="form-item cf">-->
                            <!--<div><label class="item-label"><span class="need_flag">*</span>时间地点</label></div>-->
                            <!--<table align="left">-->
                                <!--<tr style="border:0px">-->
                                    <!--<td style="border:0px" colspan="2"><label class="item-label">起始日期</label></td>-->
                                    <!--<td style="border:0px" colspan="2">-->
                                        <!--<div class="inputsize" style="margin-top: 3px">-->
                                            <!--<input type="datetime" name="start_date"  class="date"  placeholder="请选择日期" value="{$itemInfo.start_date}"/>-->
                                        <!--</div>-->
                                    <!--</td>-->
                                    <!--<td style="border:0px" colspan="2"><label class="item-label">结束日期</label></td>-->
                                    <!--<td style="border:0px" colspan="2">-->
                                        <!--<div class="inputsize" style="margin-top: 3px">-->
                                            <!--<input type="datetime" name="end_date" class="date"  placeholder="请选择日期" value="{$itemInfo.end_date}"/>-->
                                        <!--</div>-->
                                    <!--</td>-->
                                <!--</tr>-->
                                <!--<tr style="border:0px">-->
                                    <!--<td style="border:0px" colspan="2"><label class="item-label">出发地 </label></td>-->
                                    <!--<td style="border:0px" colspan="2">-->
                                        <!--<div class="inputsize" style="margin-top: 3px">-->
                                            <!--<input name="start_addr" id="citySelect_s"  type="text"  class="city_input" placeholder="请选择地址" value="{$itemInfo.start_addr}">-->
                                        <!--</div>-->
                                    <!--</td>-->
                                    <!--<td style="border:0px" colspan="2"><label class="item-label">目的地 </label></td>-->
                                    <!--<td style="border:0px" colspan="2">-->
                                        <!--<div class="inputsize" style="margin-top: 3px">-->
                                            <!--<input name="end_addr" id="citySelect_e"  type="text"  class="city_input" placeholder="请选择地址" value="{$itemInfo.end_addr}">-->
                                        <!--</div>-->
                                    <!--</td>-->
                                <!--</tr>-->
                            <!--</table>-->
                        <!--</div>-->
                        <!--<br/>-->
                    <!--</if>-->
                    <empty name="itemInfo.isQuotaReimbursement">
                        <div class="form-item cf">
                            <label class="item-label"> <span class="need_flag">*</span> 发票张数 </label>
                            <div class="controls">
                                <input type="text" name="invoiceCount" value={$itemInfo.invoiceCount}>
                            </div>
                        </div>
                        <label class='item-label'>图片</label>
                        <div class='controls'>
                            <div class='mult_imgs'>
                                <div class='upload-img-view' id='mutl_picture_pictures'></div>
                                <div class='controls uploadrow2' data-max='9' title='点击上传图片' rel='pictures'>
                                    <input type='file' id='upload_picture_pictures'>
                                </div>
                            </div>
                        </div>
                    </empty>
                    <if condition="$itemInfo.reimburse_type eq 2">
                        <div class="form-item cf">
                            <label class="item-label"> <span class="need_flag">*</span> 附件数量 </label>
                            <div class="controls">
                                <input type="text" name="fileCount" value={$itemInfo.fileCount}>
                            </div>
                        </div>
                        <input type="hidden" id="filesIds" name='fileids' value='{$data.fileids}' />
                        <div class="form-item cf">
                            <label class="item-label"><span class="need_flag">*</span>附件上传<span class="check-tips">支持文件格式doc,docx,ppt,pptx,xls,xlsx</span></label>
                            <div class="controls upload_file">
                                <div id="upload_file_files" class="uploadrow_file" ></div>
                                <input type="hidden" name="files" value=""/>
                                <div class="upload-img-box" id="files_box"></div>
                            </div>
                        </div>
                    </if>
                    <empty name="itemInfo.isQuotaReimbursement">
                        <div class="form-item cf">
                            <label class="item-label"> <span class="need_flag">*</span> 备注 </label>
                            <div class="controls">
                                <input type="text" class="text input-large" name="description" value="{$data.description}" placeholder="请填用途描述">
                            </div>
                        </div>
                    </empty>
                    <if condition="$itemInfo.type eq '授课费'">
                        <div class="form-item cf">
                            <label class="item-label"> <span class="need_flag">*</span> 课时 </label>
                            <div class="controls">
                                <input type="number" id="input_hours" name="hours" value="{$data.hours}">
                            </div>
                        </div>
                        <div class="form-item cf">
                            <label class="item-label"> <span class="need_flag">*</span> 讲课人职称 </label>
                            <div class="controls">
                                <select id="select_teacherLvl" name="teacherLvl" onchange="teacherLevelSel()">
                                    <option disabled selected value=""></option>
                                    <option value=1>副高</option>
                                    <option value=2>正高</option>
                                    <option value=3>院士专家</option>
                                </select>
                            </div>
                        </div>
                    </if>
                    <if condition="($itemInfo.reimburse_type eq 1) and ($itemInfo.type eq '其他费用')">
                        <div class="form-item cf">
                            <label class="item-label"> <span class="need_flag">*</span> 单价 </label>
                            <div class="controls">
                                <input type="number" min="0.0" step="0.01" id="input_price" name="price" value="{$data.price}" onkeyup="calc()">
                            </div>
                        </div>
                        <div class="form-item cf">
                            <label class="item-label"> <span class="need_flag">*</span> 数量 </label>
                            <div class="controls">
                                <input type="number" id="input_quantity" name="quantity" value="{$data.quantity}" onkeyup="calc()">
                            </div>
                        </div>
                    </if>
                    <div class="form-item cf">
                        <label class="item-label"> <span class="need_flag">*</span> 该项总金额 </label>
                        <div class="controls">
                            <input type="number" min="0.0" step="0.01" id="input_total" name="total" value="{$itemInfo.total}">
                        </div>
                    </div>
                    <div class="form-item cf">
                        <span style="width: 50%;word-break:normal;display:block;" id="span_std_hint">{$itemInfo.standard_hint}</span>
                    </div>
                    <div>
                        <input type="hidden" name="id" value="{$data.id}">
                        <input type="hidden" name="application_id" value={$itemInfo.application_id}>
                        <input type="hidden" name="itinerary_id" value={$itemInfo.itinerary_id}>
                        <input type="hidden" id="input_tuition_std" name="tuition_std" value={$itemInfo.tuition_std}>
                        <input type="hidden" name="dailyStandard" value={$itemInfo.dailyStandard}>
                    </div>
                    <div class="form-item form_bh" style="width: 40%">
                        <button class="btn submit-btn ajax-post" id="submit" type="submit" target-form="form-horizontal" style="float: left">确 定</button>
                        <button class="btn cancel-btn" id="cancel" style="float: right" name="button_cancel" value=1>取 消</button>
                    </div>
                </form>
            </div>
        </section>
    </div>
</block>

<block name="style">
    <style type="text/css">
        table {
            width: 60%;
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
        }
        table td, table th {
            border: 1px solid #cad9ea;
            color: #666;
            height: 30px;
            text-align: center;
        }
        table thead th {
            background-color: #CCE8EB;
            width: 100px;
        }
        table tr:nth-child(odd) {
            background: #fff;
        }
        table tr:nth-child(even) {
            background: #F5FAFA;
        }
        .inputsize{
            display: flex;
            width: 160px;
            height: 35px;
            font-size: 14px;
            padding: 0,0,0,0;
            text-align: center;
        }
        select#selectI
        {
            width                    : 120px;
            height                   : 30px;
            padding                  : 0;
            vertical-align           : top;
            border                   : 1px solid #94c1e7;
            -moz-border-radius       : 3px;
            -webkit-border-radius    : 3px;
            border-radius            : 3px;
            -webkit-appearance       : none;
            -moz-appearance          : none;
            appearance               : none;
            background               : #ffffff url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
            font-family              : SimHei;
            font-size                : 14px;
            color                    : RGBA(102,102,102,0.7);
            cursor                   : pointer;
            text-align               : center;
        }
        select#selectPointOfInterest
        {
            width                    : 185pt;
            height                   : 40pt;
            line-height              : 40pt;
            padding-right            : 20pt;
            text-indent              : 4pt;
            text-align               : left;
            vertical-align           : middle;
            border                   : 1px solid #94c1e7;
            -moz-border-radius       : 6px;
            -webkit-border-radius    : 6px;
            border-radius            : 6px;
            -webkit-appearance       : none;
            -moz-appearance          : none;
            appearance               : none;
            font-family              : SimHei;
            font-size                : 14pt;
            font-weight              : 500;
            color                    : RGBA(102,102,102,0.7);
            cursor                   : pointer;
            outline                  : none;
        }
        div#lblSelect{ position: relative; display: inline-block;}

        div#lblSelect::after
        {
            content                 : "\25bc";
            position                : absolute;
            top                     : 0;
            right                   : 0;
            bottom                  : 0;
            width                   : 20pt;
            line-height             : 20pt;
            vertical-align          : middle;
            text-align              : center;
            background              : #94c1e7;
            color                   : #2984ce;
            -moz-border-radius       : 0 3px 3px 0;
            -webkit-border-radius    : 0 3px 3px 0;
            border-radius           : 0 3px 3px 0;
            pointer-events          : none;
        }
        .button1 {
            background-color: #008CBA; /* blue */
            border: none;
            color: white;
            padding: 5px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 14px;
        }
        .itemdiv{
            display: flex;
            width: 100%;
            height: 30px;
            font-size: 14px;
            padding: 0,0,0,0;
            text-align: center;
        }
        .item_image{
            width: 100px;
            height: 100px;
            float: left;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        .item_image_box{
            width: 100%;
            height:auto;
            word-break: break-all;
            word-wrap: break-word;
            overflow: hidden;
        }
        #dialog_pic {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,0.65);
            z-index: 100;
            display: none;
        .dialog-body {
            width: 100%;
            max-width: 250px;
            max-height: 300px;
            margin: 0 auto;
            padding: 10px;
            border-radius: 5px;
            background: white;
            overflow: auto;
            margin-top: 283px;
        img {
            width: 100%;
        }
        }
        }

    </style>
</block>

<block name="script">
    <link href="__STATIC__/datetimepicker/css/datetimepicker.css?v={:SITE_VERSION}" rel="stylesheet" type="text/css">
    <php>if(C('COLOR_STYLE')=='blue_color') echo '
        <link href="__STATIC__/datetimepicker/css/datetimepicker_blue.css?v={:SITE_VERSION}" rel="stylesheet" type="text/css">
        ';</php>
    <link href="__STATIC__/datetimepicker/css/dropdown.css?v={:SITE_VERSION}" rel="stylesheet" type="text/css">
    <link href="__STATIC__/cityselect/cityLayout.css" rel="stylesheet">
    <script type="text/javascript" src="__STATIC__/cityselect/cityselect.js"></script>
    <script type="text/javascript" src="__STATIC__/datetimepicker/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="__STATIC__/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js?v={:SITE_VERSION}" charset="UTF-8"></script>
    <script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>

    <script type="text/javascript">
        var filesInfo = [];
        var fileUploader = null;
        var fileObjs = [];

        $(function() {
            $('.date').datetimepicker({
                format: 'yyyy-mm-dd',
                language: "zh-CN",
                minView: 2,
                autoclose: true
            });
            init_city_select($("#citySelect_s"));
            init_city_select($("#citySelect_e"));
            init_city_select($("#citySelect_m"));

            var UploadFileExts = 'jpg,gif,png,jpeg,zip,rar,tar,gz,7z,doc,docx,txt,xml,xls,xlsx,csv,pem,amr,mp3,mp4,bmp,wma,wav';
            //初始化上传图片插件
            initUploadImg();
            if(UploadFileExts!=''){
                initUploadFile(function(){},UploadFileExts);
            }else{
                initUploadFile();
            }

            fileUploader = initUploadFileWithRemove(fileUploadSuccess)[0];
            init_file_uplaod();

            showTab();
            $("img.item_image").click(function(){
                var _this = $(this); // 将当前的pimg元素作为_this传入函数
                imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
            });
        });

        // $(function(){
        //     var UploadFileExts = 'jpg,gif,png,jpeg,zip,rar,tar,gz,7z,doc,docx,txt,xml,xls,xlsx,csv,pem,amr,mp3,mp4,bmp,wma,wav';
        //     //初始化上传图片插件
        //     initUploadImg();
        //     if(UploadFileExts!=''){
        //         initUploadFile(function(){},UploadFileExts);
        //     }else{
        //         initUploadFile();
        //     }
        //
        //     fileUploader = initUploadFileWithRemove(fileUploadSuccess)[0];
        //     init_file_uplaod();
        //
        //     $('.time').datetimepicker({
        //         format: 'yyyy-mm-dd hh:ii',
        //         language:'zh-CN',
        //         minView:0,
        //         autoclose:true
        //     });
        //     $('.date').datetimepicker({
        //         format: 'yyyy-mm-dd',
        //         language:'zh-CN',
        //         minView:2,
        //         autoclose:true
        //     });
        //
        //     init_city_select($("#citySelect_s"));
        //     init_city_select($("#citySelect_e"));
        //     init_city_select($("#citySelect_m"));
        //     showTab();
        //
        //     $('.toggle-data').each(function(){
        //         var data = $(this).attr('toggle-data');
        //         if(data=='') return true;
        //
        //         if($(this).is(':selected') || $(this).is(':checked')){
        //             change_event(this)
        //         }
        //     });
        //     $('.toggle-data').bind('click',function(){ change_event(this) });
        //     $('select').change(function(){
        //         $('.toggle-data').each(function(){
        //             var data = $(this).attr('toggle-data');
        //             if(data=='') return true;
        //
        //             if($(this).is(':selected') || $(this).is(':checked')){
        //                 change_event(this)
        //             }
        //         });
        //     });
        // });

        // upload files
        //上传附件组件
        function init_file_uplaod () {
            var tmp = $('#filesIds').val();
            if (tmp != ''){
                filesInfo = JSON.parse(tmp);
            }

            var box_html = "<div class=\"upload-pre-file\">";
            console.log(filesInfo.length);
            for (let i = 0; i < filesInfo.length; i++) {
                console.log(filesInfo[i]);
                box_html += "<span class=\"upload_icon_all\"></span>" + filesInfo[i].name;
                box_html += "<span class=\"emoji emoji274c\" onclick=\"delFile(" + i +")\"></span>";
            }
            box_html += "</div>"
            document.getElementById('files_box').innerHTML = box_html;
        }

        function fileUploadSuccess(file,data, name){
            if(data.status){
                filesInfo.push({
                    id: data.id,
                    name: data.name
                })
                fileObjs.push(file)
                var tmp = JSON.stringify(filesInfo);
                $('#filesIds').val(tmp);

                var box_html = "<div class=\"upload-pre-file\">";
                console.log(filesInfo);
                for (let i = 0; i < filesInfo.length; i++) {
                    box_html += "<span class=\"upload_icon_all\"></span>" + filesInfo[i].name;
                    box_html += "<span class=\"emoji emoji274c\" onclick=\"delFile(" + i + ")\"></span>";
                }
                box_html += "</div>"

                $("input[name="+name+"]").parent().find('.upload-img-box').html(box_html);
            }
        }

        function delFile (index) {
            console.log('delFile');
            fileUploader.removeFile(fileObjs[index]);
            fileObjs.splice(index,1);
            filesInfo.splice(index,1);
            var tmp = JSON.stringify(filesInfo);
            $('#filesIds').val(tmp);
            document.getElementById('files_box').innerHTML = '';
            var box_html = "<div class=\"upload-pre-file\">";
            console.log(filesInfo.length);
            for (let i = 0; i < filesInfo.length; i++) {
                console.log(filesInfo[i]);
                box_html += "<span class=\"upload_icon_all\"></span>" + filesInfo[i].name;
                box_html += "<span class=\"emoji emoji274c\" onclick=\"delFile(" + i +")\"></span>";
            }
            box_html += "</div>"
            console.log(box_html);
            document.getElementById('files_box').innerHTML = box_html;
        }

        function teacherLevelSel() {
            var level_sel = $('#select_teacherLvl').val()-1;
            var tuition_std = $('#input_tuition_std').val();
            var hours = $('#input_hours').val();
            var std = JSON.parse(tuition_std);
            var std_total = std[level_sel]*hours;
            console.log('hours:' + hours);
            console.log('tuition_std:' + tuition_std);
            console.log('std:' + std);
            console.log('std_total:' + std_total);
            $('#input_total').val(std_total);
            var level_str = ['副高', '正高', '院士专家'];
            var hint = '[提示] '+level_str[level_sel]+'级老师 每学时最高不超过'+std[level_sel]+'元, '+hours+'学时总共不超过'+std_total+'元';
            if(hours == "")
                document.getElementById("span_std_hint").innerText = '请输入课时!';
            else
                document.getElementById("span_std_hint").innerText = hint;
        }

        function calc() {
            var i1 = document.getElementById('input_price').value;
            var i2 = document.getElementById('input_quantity').value;
            if (i1 && i2) {
                var r = document.getElementById('input_total');
                var f = parseFloat(i1 * i2);
                r.value = f.toFixed(2);
                //r.style.display = 'block';
            }
        }
    </script>
</block>